import React, { useEffect, useState } from 'react';
import { Modal, Select } from 'antd';
import { AdminTableListItem, UpdateRoleParams } from '../adminData.d';
import { getAdminRoles,getAdminRolesSelectItems } from '../adminService';
import { queryRole } from '../../role/roleService';

export interface FormValueType extends Partial<AdminTableListItem> {
}

export interface RoleFormProps {
    onCancel: () => void;
    onSubmit: (values: UpdateRoleParams) => void;
    roleModalVisible: boolean;
    currentData: Partial<AdminTableListItem>;
}

export interface Role{
    roleId: string;
    roleName: string;
    status?: number;
}

const AdminRoleForm: React.FC<RoleFormProps> = (props) => {
    const { Option } = Select;
    const [selectRoles, setSelectRoles] = useState<string[]>();
    const [roleData, setRoleData] = useState<Role[]>([]);

    const {
        onSubmit,
        onCancel,
        roleModalVisible,
        currentData,
    } = props;

    // useEffect(() => {
    // }, [props.roleModalVisible]);

    // 加载当前设置用户 角色数据
    useEffect(() => {
        getAdminRoles({id: currentData.adminId||'0'}).then(res=>{
            console.log('getAdminRoles selectRoles',selectRoles);
            currentData.roles = res.data||[];
                if(currentData.roles){
                    const roleIds = currentData.roles.map(item=>item.roleId);
                    setSelectRoles(roleIds);
                    console.log('selectRoles',selectRoles);
                }
        });
    }, [props.roleModalVisible]);

    useEffect(() => {

        // 加载当前登录用户可设置的角色选择列表
        getAdminRolesSelectItems().then(res=>{
            setRoleData(res.data||[]);
        });
        // 加载所有角色
        // queryRole({pageSize:10000}).then(res=>{
        //     setRoleData(res.data);
        // });
    }, []);

    const handleSubmit = () => {
        const data = {
            adminId: currentData.adminId||'',
            roleIds: selectRoles,
        }
        onSubmit(data);
    };

    const handleSelectChange = (values:string[]) =>{
        setSelectRoles(values);
    }

    const children:any = [];
    for (let i=0;i<roleData.length;i+=1) {
        const role = roleData[i];
        const disabled = role.status===0;
        children.push(<Option key={role.roleId} value={role.roleId} disabled={disabled}>{role.roleName}</Option>);
    }

    const renderContent = () => {
        return (
            <Select
                mode="multiple"
                allowClear
                style={{ width: '100%' }}
                placeholder="Please select"
                value={selectRoles}
                onChange={handleSelectChange}
                >
                {children}
            </Select>
        );
    };

    return (
        <Modal
            forceRender
            destroyOnClose
            title="设置角色"
            visible={roleModalVisible}
            okText = '保存'
            onOk={handleSubmit}
            onCancel={onCancel}
        >
            {renderContent()}
        </Modal>
    );
};

export default AdminRoleForm;
